'use strict';
import Vue from 'vue';
import Vuex from 'vuex';
import asset from 'app/asset';
import cn from 'app/lang/cn';

Vue.use(Vuex);

export default (initState = {}) => new Vuex.Store({

  state: {
    asset,
    assetLoaded: false,
    lang: { cn },
    useLang: 'cn',
    skills: {
      data: [ 95, 80, 80, 80, 80, 65, 65 ],
      label: [ '前端基础', '微信小程序', 'Vue.js', 'Node.js', 'jQuery', 'webpack', 'Git' ],
      color: [
        '#ef5350', '#ec407a', '#ab47bc',
        '#42a5f5', '#26a69a', '#ffa726',
        '#ff7043',
      ],
      color2: [
        '#f44336', '#e91e63', '#9c27b0',
        '#2196f3', '#009688', '#ff9800',
        '#ff5722',
      ],
      label2: [ '精通', '熟悉', '熟悉', '熟悉', '掌握', '良好', '良好' ],
    },
    ...initState,
  },

  getters: {

    bannerImages(state) {
      return [
        state.asset.images.Banner1,
        state.asset.images.Banner2,
        state.asset.images.Banner3,
      ];
    },

    lang(state) {
      return state.lang[state.useLang];
    },
  },

  actions: {

    async loadAsset(ctx) {
      await ctx.dispatch('loadImages', ctx.state.asset.images);
      ctx.commit('set', { assetLoaded: true });
    },

    async loadImages(ctx, images) {
      const load = src => new Promise(resolve => {
        const img = new Image();
        img.addEventListener('load', () => resolve());
        img.src = src;
      });
      for (const key in images) {
        await load(images[key]);
      }
    },
  },

  mutations: {

    set(state, obj) {
      for (const key in obj) {
        state[key] = obj[key];
      }
    },
  },
});
